<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="close"
    @open="fetch"
    width="50%"
    append-to-body
  >
    <el-card>
      <div slot="header">
        <span>角色切换</span>
      </div>
      <div class="content">
        <el-table
          :header-cell-style="{
            backgroundColor: 'rgb(229, 241, 253)',
            fontSize: '14px',
            color: '#666',
            fontWeight: '700',
          }"
          stripe
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column label="角色名称" prop="name"> </el-table-column>
          <el-table-column
            label="操作"
            header-align="left"
            align="left"
            width="200"
          >
            <template slot-scope="{ row }">
              <we-button
                size="mini"
                type="primary"
                v-if="row.isActive"
                identification=""
                @click="handleClickSwitch(row)"
                >切换</we-button
              >
              <span style="color: #ff3030; padding: 0 12px" v-else>当前</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </el-dialog>
</template>

<script>
import Card from "@/components/Card";
import WeButton from "@/components/WeButton";
import WePagination from "@/components/WePagination";
import { fetchRole, switchRole } from "@/api/changeRole";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Card,
    WeButton,
    WePagination,
  },
  data() {
    return {
      // 分页数据
      total: 0,
      pagination: {
        pageNum: 1,
        pageSize: 8,
      },
      tableData: [],
    };
  },
  methods: {
    close() {
      this.$emit("update:dialogVisible", false);
    },
    fetch() {
      fetchRole({ sysCode: "131452021" }).then((response) => {
        if (response && response.code === 200) {
          const roleList = response.data["角色列表"];
          roleList.map((item) => {
            item.isActive = true;
            if (item.roleCode === response.data["当前角色"]) {
              item.isActive = false;
            }
          });
          this.tableData = roleList.filter((a) => a.sysCode === "131452021");
        }
      });
    },
    handleClickSwitch({ roleCode }) {
      switchRole({ roleCode, sysCode: "131452021" }).then((response) => {
        if (response) {
          sessionStorage.clear();
          this.$router.push("/reviews_title");
          this.$router.go(0);
          this.$message({
            type: "success",
            message: response.msg,
          });
        }
      });
    },
  },
};
</script>